<template>
  <div class="container">
    <div class="ding">
      <ul>
        <li class="all">全部</li>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
        <li>#</li>
      </ul>
      <ul>
        <li class="all">全部</li>
        <li>内地</li>
        <li>港台</li>
        <li>欧美</li>
        <li>韩国</li>
        <li>日本</li>
        <li>其他</li>
      </ul>
      <ul>
        <li class="all">全部</li>
        <li>男</li>
        <li>女</li>
        <li>组合</li>
        <li>乐队</li>
      </ul>
    </div>
    <div class="tupianxinxi">
      <div class="parcel">
        <div class="geshougeren" v-for="item in singerdata" :key="item.id">
          <div class="cont">
            <div class="tu" @click="handle(item.id)">
              <img :src="item.picUrl" />
            </div>
            <div class="name" @click="handle(item.id)">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="geshouliebiao">
      <div class="liebiaokuang">
        <ul>
          <li v-for="item in singername" :key="item.id">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="fenye">
      <!--分页组件-->
      <div class="pagination">
        <!--上一页-->
        <button>
          &lt;
        </button>
        <!--第一页-->
        <button class="active">1</button>
        <!--第一个省略号-->
        <button class="dian">...</button>
        <!--连续页码-->
        <button></button>

        <!--第二个省略号-->
        <button class="dian">...</button>
        <!--总条数-->
        <button class="zongshu">
          1212
        </button>
        <!--下一页-->
        <button>
          &gt;
        </button>
      </div>
    </div>
  </div>
</template>

<script>
// import { reqSingers } from '@/api/singer'
import request from '@/utils/request'
export default {
  name: 'Singer',
  data() {
    return {
      singerdata: [], // 歌手头像和名字
      singername: [] //歌手名
    }
  },
  async mounted() {
    const limit = 48
    const result = await request.get(`/toplist/artist/${limit}/${-1}`)
    console.log(result)
    this.singerdata = result.list.artists.splice(0, 12)
    this.singername = result.list.artists.splice(0, 36)
  },
  methods: {
    handle(id) {
      this.$router.push(`/SingerInformation?id=${id}`)
      console.log(id)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1200px;
  margin: 0 auto;

  .ding {
    width: 1200px;
    height: 130px;
    margin-top: 30;
    margin-bottom: 10px;

    ul {
      width: 1200px;
      height: 30px;
      margin-top: 20px;
      display: flex;

      li {
        // width: 28px;
        height: 30px;
        padding: 0 16px;
        line-height: 30px;
        font-size: 14px;
        cursor: pointer;
      }

      .all {
        background-color: #e61723;
        border-radius: 15px;
        color: white;
      }
    }
  }
}

.tupianxinxi {
  width: 1200px;
  height: 508px;

  .parcel {
    width: 1230px;
    display: flex;
    flex-wrap: wrap;

    .geshougeren {
      width: 175px;
      height: 254px;
      padding: 0 15px;
      margin: 0 14px;

      .cont {
        width: 175px;
        height: 214px;
        margin: 20px 0;

        .tu {
          width: 175px;
          height: 175px;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer;

          img {
            width: 175px;
            height: 175px;
          }
        }

        .name {
          width: 175px;
          font-size: 16px;
          text-align: center;
          margin-top: 18px;
          cursor: pointer;
        }
      }
    }
  }
}

.geshouliebiao {
  width: 1200px;
  height: 259px;
  margin: 30px 0;

  .liebiaokuang {
    width: 1230px;
    height: 259px;

    ul {
      width: 1230px;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 175px;
        height: 43px;
        padding: 0 15px;
        margin: 0 15px;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}

.fenye {
  width: 1190px;
  height: 40px;
  padding: 2px 5px;
  display: flex;
  justify-content: center;

  .pagination {
    width: 800px;
    text-align: center;

    .zongshu {
      width: 60px;
    }

    .dian {
      font-size: 30px;
    }

    button {
      width: 40px;
      height: 40px;
      margin: 0 5px;
      background-color: #fff;
      color: #606266;
      outline: none;
      padding: 0 4px;
      vertical-align: center;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;
      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }
      &.active {
        cursor: not-allowed;
        background-color: #e61723;
        color: #fff;
      }
    }
  }
}
</style>
